import React, { Component } from 'react'
import axios from 'axios'
const golbalContext = React.createContext()
export default class App extends Component {
    constructor() {
        super()
        this.state = {
            filmsList: [],
            info: ''
        }
        axios.get('/test.json').then(response => {
            this.setState({ filmsList: response.data.data.films })
            console.log(response.data.data.films)
        })
    }
    render() {
        return (
            <golbalContext.Provider value={{
                 uanme: 'aaa', smsL: '545' ,
                 info:'666'
                 }}>
                <div>
                    {
                        this.state.filmsList.map((item) => <FilmItem key={item.filmId} {...item}
                            onEvent={(value) => {
                                this.setState({ info: value })
                            }}
                        ></FilmItem>)
                    }
                    <FileDetail></FileDetail>
                </div>
            </golbalContext.Provider>
        )
    }
}

class FilmItem extends Component {
    render() {
        const { name, poster, grade, synopsis } = this.props
        return (
            <golbalContext.Consumer>
                {
                    (value) => {
                        console.log('value', value)
                        value.info='999'
                        return <div className="filmItem" onClick={() => { console.log(synopsis) }}>
                            <img src={poster} alt={name} />
                            <h4>{name}</h4>
                            <div>评分{grade}</div>
                        </div>
                    }
                }
            </golbalContext.Consumer>
        )
    }
}

class FileDetail extends Component {
    render() {
        return (
            <golbalContext.Consumer>
                {
                    (value) => {
                        <div className="filmDetail">
                            {value.info}
                        </div>
                    }
                }
            </golbalContext.Consumer>
        )
    }
}


